import screenfull from 'screenfull'

class landscape {
    evt = 'onorientationchange'
    in
    window ?
    'orientationchange': 'resize'

    width = document.documentElement.clientWidth
    height = document.documentElement.clientHeight
    body = document.body

    constructor() {
        const width = Math.min(this.width, this.height)
        const height = Math.max(this.width, this.height)

        if (window.orientation === 180 || window.orientation === 0) {
            this.body.setAttribute(
                'style',
                `top:${(height - width) / 2}px;left:${
                    0 - (height - width) / 2
                }px;transform:'rotate(90deg)';transform-origin:'50% 50%';width:${height}px;height:${width}px`
            )
        }
    }

    reset = () => {
        const width = Math.min(this.width, this.height)
        const height = Math.max(this.width, this.height)

        if (window.orientation === 180 || window.orientation === 0) {
            console.log('竖屏状态')
            //竖屏状态
            this.body.setAttribute(
                'style',
                `top:${(height - width) / 2}px;left:${
                    0 - (height - width) / 2
                }px;transform:'rotate(90deg)';transform-origin:'50% 50%';width:${height}px;height:${width}px`
            )
        } else if (window.orientation === 90 || window.orientation === -90) {
            console.log('横屏状态')
            //横屏状态
            this.body.setAttribute(
                'style',
                `top:0;left:0;transform:'none';transform-origin:'50% 50%';width:${height}px;height:${width}px`
            )
        }

        window.location.reload()

        // 切换之后强制全屏
        if (screenfull.isEnabled) {
            screenfull.request()
        }
    }

    init = () => {
        window.addEventListener('orientationchange', this.reset, false)
    }
}

export default new landscape()
